import React from 'react';
import { Modal, Form, Typography, Input, Notification } from '@arco-design/web-react';
import { post } from '@/utils/request';

const UserReset = React.forwardRef((_, ref) => {
    const [form] = Form.useForm();

    React.useImperativeHandle(ref, () => ({
      reset
    }));
    const reset = (id:string, name:string) => {
        setVisible(true)
        form.setFieldsValue({ id, password:'' })
        setName(name)
    }
    const [name,setName] = React.useState('')
    const [visible, setVisible] = React.useState(false);
    const [loading, setLoading] = React.useState(false); 
    const onOk = () => {
        setLoading(true)
        post('/api/user/reset',form.getFieldsValue())
        .then((res)=>{
            if(res.ok){
                Notification.info({content: '密码重置成功。'})
            }
        }).finally(()=>{
            setLoading(false)
            setVisible(false)
        })
    }

  return (
      <Modal
        title='重置密码'
        visible={visible}
        onOk={onOk}
        onCancel={() => setVisible(false)}
        confirmLoading={loading}
      >
         <Form
            form={form}
            labelAlign="right"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            onSubmit={onOk}
        >
            <Form.Item hidden={true} field='id'><Input /></Form.Item>
            <Form.Item label='姓名:'>
                <Typography>{name}</Typography>
            </Form.Item>

            <Form.Item label='密码:' field="password">
                <Input.Password placeholder='请输入密码' allowClear />
            </Form.Item>
        </Form>
      </Modal>
  );
});

export default UserReset;
